﻿{extend name="home_layout" /}
{block name="style"}
<!-- 本页样式表 -->
<link href="__CSS__/home.css" rel="stylesheet" />
{/block}

{block name="body"}
<!-- 主体（一般只改变这里的内容） -->
<div class="blog-body">
    <!-- canvas -->
    <canvas id="canvas-banner" style="background: #393D49;"></canvas>
    <!--为了及时效果需要立即设置canvas宽高，否则就在home.js中设置-->
    <script type="text/javascript">
        var canvas = document.getElementById('canvas-banner');
        canvas.width = window.document.body.clientWidth - 10;//减去滚动条的宽度
        if (screen.width >= 992) {
            canvas.height = window.innerHeight * 1 / 3;
        } else {
            canvas.height = window.innerHeight * 2 / 7;
        }
    </script>
    <!-- 这个一般才是真正的主体内容 -->
    <div class="blog-container">
        <div class="blog-main">
            <!-- 网站公告提示 -->
            <div class="home-tips shadow">
                <i style="float:left;line-height:17px;" class="fa fa-volume-up"></i>
                <div class="home-tips-container">
                    {volist name="nitices" id="nitice"}
                        <span >{:html_entity_decode($nitice->content)}</span>
                    {/volist}
                    <!--<span style="color: #009688">偷偷告诉大家，本博客的后台管理也正在制作，为大家准备了游客专用账号！</span>-->
                    <!--<span style="color: red">网站新增留言回复啦！使用QQ登陆即可回复，人人都可以回复！</span>-->
                    <!--<span style="color: red">如果你觉得网站做得还不错，来Fly社区点个赞吧！<a href="http://fly.layui.com/case/2017/" target="_blank" style="color:#01AAED">点我前往</a></span>-->
                    <!--<span style="color: #009688">不落阁 &nbsp;—— &nbsp;一个.NET程序员的个人博客，新版网站采用Layui为前端框架，目前正在建设中！</span>-->
                </div>
            </div>
            <!--左边文章列表-->
            <div class="blog-main-left">
                {volist name="articles" id="article"}
                <div class="article shadow">
                    <div class="article-left">
                        <img src="{$article->cover}" alt="{$article->title}" />
                    </div>
                    <div class="article-right">
                        <div class="article-title">
                            <a href="{:url('/article_'.$article->id)}">{$article->title}</a>
                        </div>
                        <div class="article-abstract">
                            {$article->desc}                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="article-footer">
                        <span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;{$article->create_time}</span>
                        <span class="article-author"><i class="fa fa-user"></i>&nbsp;&nbsp;{$article->author}</span>
                        <span><i class="fa fa-tag"></i>&nbsp;&nbsp;<a href="#">{$article->labelText}</a></span>
                        <span class="article-viewinfo"><i class="fa fa-eye"></i>&nbsp;{$article->brow_volume}</span>
                        <span class="article-viewinfo"><i class="fa fa-commenting"></i>&nbsp;{$article->brow_volume}</span>
                    </div>
                </div>
                {/volist}
            </div>
            <!--右边小栏目-->
            <div class="blog-main-right">
                <div class="blogerinfo shadow">
                    <div class="blogerinfo-figure">
                        <img src="__IMG__/logo.jpg" alt="16" style="width:100px;height:100px;"/>
                    </div>
                    <p class="blogerinfo-nickname">{$author['author']}</p>
                    <p class="blogerinfo-introduce">{$author['short_desc']}</p>
                    <p class="blogerinfo-location"><i class="fa fa-location-arrow"></i>{$author['address']}</p>
                    <hr />
                    <div class="blogerinfo-contact">
                        <a target="_blank" title="QQ交流" href="http://wpa.qq.com/msgrd?v=3&uin={$web_info.qq}&site=qq&menu=yes"><i class="fa fa-qq fa-2x"></i></a>
                        <a target="_blank" title="给我写信" href="javascript:layer.msg('没有邮箱')"><i class="fa fa-envelope fa-2x"></i></a>
                        <a target="_blank" title="新浪微博" href="javascript:layer.msg('没有微博')"><i class="fa fa-weibo fa-2x"></i></a>
                        <a target="_blank" title="码云" href="{$web_info.git}"><i class="fa fa-git fa-2x"></i></a>
                    </div>
                </div>
                <div></div><!--占位-->
                <div class="blog-module shadow">
                    <div class="blog-module-title">热文排行</div>
                    <ul class="fa-ul blog-module-ul">
                        {volist name="hots" id="hot"}
                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="{:url('/article_'.$hot->id)}">{$hot->title}</a></li>
                        {/volist}
                    </ul>
                </div>
                <div class="blog-module shadow">
                    <div class="blog-module-title">一路走来</div>
                    <dl class="footprint">
                        {volist name="lines" id="line"}
                        <dt>{$line->create_time}</dt>
                        <dd>{$line->content}</dd>
                        {/volist}
                    </dl>
                </div>
                <div class="blog-module shadow">
                    <div class="blog-module-title">网站建设</div>
                    <dl class="footprint">
                        {volist name="webLines" id="line"}
                        <dt>{$line->create_time}</dt>
                        <dd>{$line->content}</dd>
                        {/volist}
                    </dl>
                </div>
                <div class="blog-module shadow">
                    <div class="blog-module-title">友情链接</div>
                    <ul class="blogroll">
                        {volist name="friendLinks" id="link"}
                        <li><a target="_blank" href="{$link->url}" title="Layui">{$link->name}</a></li>
                        {/volist}
                    </ul>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>

<!-- layui.js -->

<!-- 本页脚本 -->
{/block}

{block name="script"}
<script src="__JS__/home.js"></script>
{/block}